<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<link href="http://47.100.102.177:8080/app/css/shoppingcar/shoppingcar.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="http://47.100.102.177:8080/app/css/common/nav.css" />
		<link rel="stylesheet" type="text/css" href="http://47.100.102.177:8080/app/css/common/foot.css">
		<link rel="icon" href="http://47.100.102.177:8080/app/images/common/云上书屋.png" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" href="../../boot/plugin/bootstrap-3.4.1-dist/css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="../../boot/plugin/layui/css/layui.css">
		<script src="../../boot/plugin/jquery.min.js"></script>
		<script src="../../boot/plugin/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
		<script src="../../boot/plugin/layui/layui.js"></script>

		<style>
		.title{
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			width: 200px;
		}
		.total-box {
			border: 3px solid green;
			width: 70px;
			padding: 3px;
			margin: 5px 0 5px 0;
			text-align: center;
			font-size: 14px;
		}
		#shipping-table {
			width: 350px;
			float: right;
		}
		#shipping-table th {
			padding: 5px;
			background:  rgb(21,184,215);
			color: white;
			text-align: left;
		}
		.clear {
			clear: both;
		}
		#order-total {
			font-weight: bold;
			font-size: 21px;
			width: 110px;
		}
		</style>

	</head>
	<body>
		<!--定义头部-->
		<div class='nav'>
			<ul>
				<li><img src="http://47.100.102.177:8080/app/images/common/素材-大书.png"></li>
				<li><a id="first">主页</a></li>
				<li><a href='#'>分类</a>
					<ul>
						<li><a href='../index01'>图书</a></li>
						<li><a href='../index02'>电子书</a></li>
					</ul>
				</li>
				<c:if test="${user!=null}">
					<li><a href='#'>${user.uname}</a>
						<ul>
							<li><a href='../car/shoppingcar?account=${user.account}'>购物车</a></li>
							<li><a href='../personal/center?status=1'>个人信息</a></li>
							<li><a href='../order/order'>订单信息</a></li>
						</ul>
					</li>
					<li><a href="/boot/users/exit">安全退出</a></li>
				</c:if>
				<li><a href='../login'>登陆</a></li>
				<li><a href='../login'>注册</a></li>
			</ul>
		</div>
		<div class="container-fluid">
			<div class="table-responsive">
				<table class="table">
					<caption>购物车详情</caption>
					<thead>
					<tr>
						<th><input id="All" type="checkbox"></th>
						<th>序号</th>
						<th>商品名称</th>
						<th>商品图</th>
						<th>单价</th>
						<th>购买数量</th>
						<th>总价</th>
						<th>描述</th>
						<th>操作</th>
					</tr>
					</thead>
					<tbody class="outer">
					<c:forEach items="${shoppingcarlist}" var="c" varStatus="vs">
						<input type="hidden" value="${c.userId}" id="peo">
						<tr>
							<td><input name="item" id="checkbox" type="checkbox"></td>
							<td>${vs.count}</td>
							<td class="title">${c.name}</td>
							<td><img src="${c.imgUrl}"></td>
							<td >${c.price}</td>
							<td><input onblur="change_num(${c.id},this)" class="form-control"  type="number" value="${c.num}"></td>
							<td><input type="number" class="jg" value="${c.total}"></td>
							<input class="cid" type="hidden" value="${c.id}">
							<td>云上书屋出品</td>
							<td><a href="javascript:del(${c.id})" class="text-danger"><span class="glyphicon glyphicon-trash"></span></a></td>
						</tr>
					</c:forEach>
					</tbody>
				</table>
			</div>
			<hr class="layui-border-green">
			<tr>
				<td>产品小计:
					<input  type="text" class="total-box" id="product-subtotal" disabled="disabled">
				</td>
			</tr>
			<table id="shipping-table">
				<tbody><tr>
					<th>总数量.</th>
					<th>X</th>
					<th>运费</th>
					<th>=</th>
					<th style="text-align: right;">总运费</th>
				</tr>
				<tr>
					<td id="total-pallets">
						<input id="total-pallets-input" type="text" disabled="disabled">
					</td>
					<td>X</td>
					<td id="shipping-rate">3.00</td>
					<td>=</td>
					<td style="text-align: right;">
						<input type="text" class="total-box" id="shipping-subtotal" disabled="disabled">
					</td>
				</tr>
				</tbody></table>
			<div class="clear"></div>
			<div style="text-align:right;">
				<span>订单总额: </span>
				<input type="text" class="total-box" id="order-total" disabled="disabled">
				<br>
				<button type="button" id="buy" class="layui-btn layui-btn-danger" >立刻购买</button>
			</div>
		</div>
	</body>
<script>
	let all=document.getElementById("All");
	let hobbies = document.getElementsByName("item");
	let zongji=document.getElementById("product-subtotal");
	let number=document.getElementById("total-pallets-input");
	let freight=document.getElementById("shipping-subtotal");
	let totlmoney=document.getElementById("order-total");
	let buy=document.getElementById("buy");
	let p = document.getElementsByClassName("jg");
	let n = document.getElementsByClassName("form-control");
	let c=document.getElementsByClassName("cid");
	let list=new Array();
	let id=document.getElementById("peo").value;
	let t=0.0;
	let b=0;
	function del(id){
		layer.load(3);
		$.get("/boot/car/del",{cid:id},function(res){
			if(res.code=='200'){
				location.reload();
				layer.closeAll();
			}else{
				layer.msg(res.msg);
			}
		})
	}
	//修改价格
	function change_num(id,obj){//此处的id就是购物车对象的id
		let new_num = obj.value;
		if(new_num<=0){
			del(id)
		}
		else {
		//ajax操作
		$.get('/boot/car/update',{cid:id,number:new_num},function(res){
			if(res.code=='200'){
				//js操作dom
				//获取单价...
				let price_td = parseFloat(obj.parentElement.previousElementSibling.innerHTML.trim());
				let total_input = obj.parentElement.nextElementSibling;
				//td是没有innerText,只有innerHTML
				total_input.innerHTML=(price_td*parseFloat(new_num)).toFixed(1);
				//alert(price_td*new_num)
				layer.msg(res.msg);
			}else{
				layer.msg(res.msg);
			}
		});
	}
	}
	   all.onclick=()=> {
		   if (all.checked) {
			   for (var i = 0; i < hobbies.length; i++) {
				   hobbies[i].checked = true;
			   }
		   } else {
			   for (var i = 0; i < hobbies.length; i++) {
				   hobbies[i].checked = false;
			   }
		   }
		   for (var i = 0; i < hobbies.length; i++) {
				   t=0.0;
				   b=0;
				   for (let m = 0; m < hobbies.length; m++) {
					   if(hobbies[m].checked==true){
						   t=t+parseFloat(p[m].value);
						   b=b+parseInt(n[m].value);
					   }
				   }
				   zongji.value=t;
				   number.value=b;
				   freight.value=b*3;
				   totlmoney.value=t+b*3;
			   }
	   }
	for (var i = 0; i < hobbies.length; i++) {
		hobbies[i].onclick = () => {
			t=0.0;
			b=0;
			for (let m = 0; m < hobbies.length; m++) {
				if(hobbies[m].checked==true){
					t=t+parseFloat(p[m].value);
					b=b+parseInt(n[m].value);
				}
			}
			zongji.value=t;
			number.value=b;
			freight.value=b*3;
			totlmoney.value=t+b*3;
		}
	}

	buy.onclick=()=>{
		if(totlmoney.value==0){
			layer.msg("没有选中任何商品！")
		}
		else {
			for (let i = 0; i <hobbies.length ; i++) {
				if(hobbies[i].checked==true){
					list.push(c[i].value);
					console.log(list);
				}
			}
			$.get('/boot/orderindex/add',{cid:list.toString()},function (res) {
				layer.msg(res.msg);
			})
			$.get("/boot/orderindex/address",{id:id},function (res) {
				layer.msg(res.msg)
			})
			window.location="/boot/orderindex/orderdetail?price="+zongji.value+"&freight="+freight.value+"&totlmoney="+totlmoney.value;
		}
	}

</script>
</html>
